﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Table style designer preview</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   	<script type="text/javascript">
	   window.onload = function () { parent.initDesigner("frame"); }
	 </script>
	<!-- page styles are inserted before this first link tag by DOM -->
	<link href="../IncludeCssNoCache.aspx" rel="stylesheet" type="text/css" title="wysiwyg" id="wysiwygcss" onload="parent.initDesigner('css');" />
	
	
<style type="text/css">
/* <![CDATA[ */
	.picker {
		position: absolute;
		display: block;
		opacity: .9;
		filter: alpha(opacity = 90);
	}
	.border-top {
		right: 50%;
		bottom: 100%;
	}
	caption .border-top {
		bottom: 0;
	}
	
	.border-bottom {
		left: 50%;
		top: 100%;
	}
	.border-left, .border-right, .font, .cellprop {
		top: 50%;
		margin-top: -9px;
	}
	.border-left {
		right: 100%;
	}
	.border-right {
		left: 100%;
	}
	.font {
		left: 33%;
		margin-left: -10px;		
	}
	.cellprop {
		right: 33%;
		margin-right: -10px;
	}
	div { 
		overflow: visible;
		position: relative;
		margin: -0px;
/*		height: 3em;*/
/*		z-index: 1; /* should be set inline */
	}
	#demoTable1,#demoTable2,#demoTable3,#demoTable4 {
		float: left;
		margin: 0 19px 19px 0;
	}
/* ]]> */
</style>

</head>
<body style="padding: 20px;">

<div id="documentEdge">

<p id="lorem1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In ullamcorper ipsum eget erat. </p>

<div>
<!-- table with top header -->

<div id="demoTable1">
	<table>
		<caption><div>Module prices</div></caption>
	
		<tr>
			<th><div>Module</div></th>
			<th>Price (Euro)</th>
			<th>Active</th>
		</tr>
		<tr>
			<td>Auto Scroll</td>
			<td>275,00</td>
			<td>Yes</td>
		</tr>
		<tr class="alt">
			<td>Newsletter</td>
			<td>400,00</td>
			<td><a target="_blank" href="http://www.example.com/">No</a></td>
		</tr>
	
		<tr>
			<td>Banner</td>
			<td><div>400,00</div></td>
			<td>Yes</td>
		</tr>
		<tr class="alt">
			<td>Daily tip</td>
			<td>275,00</td>
			<td><div>Yes</div></td>
		</tr>
	
		<tr>
			<td>Guest book</td>
			<td>275,00</td>
			<td><a target="_blank" href="http://www.example.com/">No</a></td>
		</tr>
		
	</table>
</div>
<div style="clear: both"></div>
</div>

<!-- table with left and top header -->

<div id="demoTable3">
	<table>
		<caption><div>Website traffic 2006</div></caption>
		
		<tr>
			<th><div>Month</div></th>
			<th>Download (MB)</th>
			<th>Upload (MB)</th>
		</tr>
		<tr>
			<th>January</th>
			<td>251.2</td>
			<td>12.2</td>
		</tr>
		<tr class="alt">
			<th>February</th>
			<td>282.5</td>
			<td>15.1</td>
		</tr>
	
		<tr>
			<th>March</th>
			<td><div>312.1</div></td>
			<td>18.2</td>
		</tr>
		<tr class="alt">
			<th><div>April</div></th>
			<td>350.5</td>
			<td><div>21.2</div></td>
		</tr>
	
		<tr>
			<th>May</th>
			<td>383.8</td>
			<td>23.4</td>
		</tr>
		
	</table>
</div>

<p id="collapsenote"><em>Border difficulties?</em> Outer border of the table may be
overlapped by the cells' border. Editing the table border won't 
have any effect, unless the table border is wider or has stronger style than the cells.
To remove horizontal or vertical lines, you have to remove both top & bottom or
left & right borders of the cells accordingly.</p>

<p id="lorem2">Maecenas ultricies nulla eget lorem. Nam congue congue dui. Praesent fermentum scelerisque diam. Curabitur ultrices interdum sapien.</p>

<p id="lorem3">Cras sit amet massa ut nisl tempus hendrerit. Etiam sagittis dignissim justo. Curabitur aliquam metus a ante. Integer in lorem ut nunc accumsan facilisis. Sed enim. Mauris est metus, rutrum id, cursus eget, ullamcorper at, leo.</p>
<div style="clear:both"></div>
</div>

</body>
</html>
